<template>
    <div class="sw-swiper">
        <swiper :options="swiperOption"  ref="mySwiper">
            <swiper-slide v-for="(item,index) of swiperList" :key="index">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default{
    name: 'HomeSwiper',
    props: {
        swiperList: Array
    },
    data(){
        return{
            swiperOption: {
                pagination : '.swiper-pagination',
                loop: true,
                initialSlide :1,
            },
        }
    }
}
</script>

<style lang="stylus">
    .sw-swiper  >>> .swiper-pagination-bullet{
        background-color: #fff;
    }

    .sw-swiper{
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 59%;
        background-color: #eee;
    }

    .sw-swiper .swiper-img{
        height: 4.42rem;
    }


</style>